<template>
	<view>
		<!-- 选择商品 遮罩层 -->
		<uni-popup ref="goodsSelectInfo" type="center" :title="title" minWidth="auto">
			<!-- 列表区 -->
			<view class=" box-infos" style="display: grid;">
				<view class="boxsss100" style="display: grid;">
					
					<view class="top-but">
						<view class="searchBox floatleft" style="flex:1">
							<view class="riskTitle">搜索商品关键字</view>
							<input 
							v-model="searchValue" 
							@confirm="GetGoodsSearch(true)"
							@input="GetGoodsSearch(true)"
							class="search-ipu" placeholder-class="placeholder-class" />
						</view>
						<view @click="$common.noMultipleClicks('GetGoodsSearch',GetGoodsSearch,true)"  class="add-but-com">
							<img src="../../static/img/search.png" class="ico"></img>
							搜索
						</view>
					</view>
					<table v-if="cacheGoodsList.length>0">
						<!-- 表头 -->
						<thead>
							<tr >
								<th  class="centers ">
									序号
								</th>
								<th  class=" ">
									商品
								</th>
								<th  class=" ">
									库存
								</th>
								<th  class=" ">
									批价
								</th>
								<th  class="centers ">
									操作
								</th>
							</tr>
						</thead>
						<tbody>
							<!-- 内容 -->
							<tr  
							:key="index" 
							v-for="(item,index) in cacheGoodsList" 
							:class="{'color-e40318':item.margin<=0}"
							>
								<td  class="centers ">
									{{index+1}}
								</td>
								<td  class=" "
								@click="pageSend.name=item.name,pageSend.id=item.id,$refs.pageGoods.open()"
								>
									{{item.name}}
								</td>
								<td  class=" ">
									{{item.margin}}
								</td>
								<td  class=" ">
									￥{{item.pifajia}}
								</td>
								<td  class="centers "  @click="selectListIndex(item)">
									<view class="flex nowBut back_color">选择</view>
								</td>
							</tr>
						</tbody>
					</table>
					<!-- 暂无数据 -->
					<empty v-if="cacheGoodsList.length==0"></empty>
					<!-- end -->
				</view>
				<!-- 分页 -->
				<pages 
				:sum="page.sum"
				:current="page.nowPage"
				@updatePage="AddUpdatePage"
				></pages>
				<!-- end -->
			</view>
			<!-- end -->
			
		</uni-popup>
		<!-- end -->
		
		<!-- 商品页面 -->
		<uni-popup ref="pageGoods" type="center" :title="pageSend.name">
			<shopping_admin :isPop="false" :OnPageSearchGoodsId="pageSend.id" class="h100"></shopping_admin>
		</uni-popup>
		<!-- end -->
	</view>
</template>

<script>
	import empty from "@/components/admin-components/empty.vue"
	import pages from "@/components/admin-components/pages.vue"
	import shopping_admin from "@/components/goods/goods.vue"
	export default{
		name:'selectGoods',
		components: {
			empty,pages,shopping_admin
		},

		emits: ['change'],
		data(){
			return{
				title:'选择商品',
				pageSend:{
					id:'',
					name:''
				},
				searchValue:'',
				page:{
					nowPage:1,//当前页数
					pageCount:1,//总页数
					maxCount:0,
					sum:0,
					pageCounts:15,
				},
				cacheGoodsList:[],
				callbackData:null,
			}
		},
		methods:{
			/**
			 * 搜索商品
			*/
			GetGoodsSearch(isUpdatePage=true){
				var that = this
				that.page.nowPage = isUpdatePage == true ? 1:that.page.nowPage;
				that.$common.get_request(
					{
						type:'goods_list',
						search:that.searchValue,//搜索内容
						pages:that.page.nowPage,//当前位于页数
						page_count:that.page.pageCounts,//当前请求页的数量
					},
					(res)=>{
						that.cacheGoodsList = res.list
						that.page.sum  = res.sum
						if(isUpdatePage == true){
						that.page.nowPage  = 1
						}
					}
				);
			},
			/**
			 * 选中商品
			 * type : goods_list|goods_search
			*/
			selectListIndex(item){
				this.$emit('change', {
					data: item,
					callback:this.callbackData
				})
				this.$refs.goodsSelectInfo.close()
			},
			/**
			 * 打开弹窗
			*/
			open(data,selectTitle='选择商品'){
				this.title = selectTitle
				this.callbackData = data
				this.GetGoodsSearch()
				this.$refs.goodsSelectInfo.open()
			},
			/**
			 * 分页器回调
			*/
			updatePage(pageName,pageCount){
				var that = this
				that.page.nowPage = pageName
				that.page.pageCounts = pageCount
				that.GetGoodsSearch(false)
			},
		}
	}
</script>

<style>
</style>